<template>
    <l-layout class="l-tab-page" v-if="!lr_loadPage" :left="240" >
        <template #left>
            <l-panel :title="$t('公司信息')" style="padding-right:0;" >
                <el-tree 
                    class="learun-tree"
                    ref="mytree"
                    v-loading="treeLoading" 
                    node-key="value"
                    :data="lr_companyTree" 
                    default-expand-all 
                    :expand-on-click-node="false"  
                    :current-node-key="companyId"
                    @node-click="handleNodeClick">
                    <span class="lr-tree-node"  slot-scope="{ node}">
                       <i class="learun-icon-co"></i>
                        {{ $t(node.label) }}
                    </span>
                </el-tree>
            </l-panel>
        </template>
        <l-panel style="padding-left:0;" >
            <template #toolLeft >
                <div class="l-panel--item" >
                    <l-tree-select
                        v-model="departmentId"
                        :placeholder="$t('please select部门')"
                        :options="lr_departmentTree(lr_departments[companyId])"
                        size="mini"

                        @change="handleChangeDept"
                        >
                    </l-tree-select>
                </div>
                <div class="l-panel--item" >
                    <el-input :placeholder="$t('please enter关键字')"  @keyup.enter.native="hanleSearch" v-model="searchWord" size="mini" >
                        <el-button @click="hanleSearch" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns :hasAdd="false" >
                    <l-excel-btns></l-excel-btns>
                    <el-button type="primary" size="mini" @click="handleSync()" icon="el-icon-refresh">同步</el-button>
                </l-tool-btns>
            </template>
            <l-table 
                :columns="lr_getPageColumns(columns)" 
                :dataSource="tableData" 
                :loading="loading" 
                row-key="f_DepartmentId"
                default-expand-all
                >
                <template v-slot:f_EnabledMark="scope" >
                    <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="scope.row.f_EnabledMark"
                        @change="handleEnableChange(scope.row)"
                        >
                    </el-switch>
                </template>
                <template v-slot:isSyn="scope" >
                    <el-tag v-if="scope.row.isSyn == 1" size="mini" type="success">{{ $t('已同步') }}</el-tag>
                    <el-tag v-else size="mini" type="danger">{{ $t('未同步') }}</el-tag>
                </template>
            </l-table>
        </l-panel>

    </l-layout>
</template>

<script>

const api = window.$api.ding.organize
export default {
    components: {
    },
    data () {
        return {
            lr_isPage:true,
            //query
            searchWord:'',
            searchTableData:null,

            loading:false,
            columns: [
                {label:'名称',prop:'f_FullName',minWidth:'150'},
                {label:'编码',prop:'f_EnCode',width:'100'},
                {label:'钉钉部门Id',prop:'f_DingDepId',width:'200'},
                {label:'同步状态',prop:'isSyn',width:'100',align:'center'},
            ],

            treeLoading:false,
            companyId:'',
            departmentId:'',

            departmentList:[]

        }
    },
    computed:{
        list(){
            return this.lr_departments[this.companyId] || []
        },
        tableData(){
            if( this.loading){
                return []
            }

            if(this.searchTableData){
                return this.lr_departmentTree(this.searchTableData)
            }
            else{
                return this.lr_departmentTree(this.departmentList)
            }
        }
    },
    mounted () {
        this.init()
    },
    methods:{
        async init(){
            this.lr_loadDataItem('DepartmentNature')

            this.companyId = '53298b7a-404c-4337-aa7f-80b2a4ca6681'
            this.loadTableData()``

            this.treeLoading = true
            await this.lr_loadCompanys()
            this.$refs["mytree"].setCurrentKey('53298b7a-404c-4337-aa7f-80b2a4ca6681')
            this.treeLoading = false
        },

        async loadTableData(){
            let queryData = {
                keyword:this.searchWord,
                parentid:this.departmentId
            }
            this.loading = true
            this.departmentList=await this.$awaitWraper(api.getList(this.companyId,queryData))
            this.searchWord = ''
            this.searchTableData = null
            this.loading = false
            
        },
        handleChangeDept(){
            this.loadTableData()
        },
        hanleSearch(){
            if(this.searchWord){
                this.searchTableData = this.departmentList.filter(item => item.f_FullName.indexOf(this.searchWord) >-1 || item.f_EnCode.indexOf(this.searchWord)>-1)
            }
            else{
                this.searchTableData = null
            }
        },
        handleNodeClick(node) {
            this.loading = true
            this.companyId = node.f_CompanyId
            this.departmentId = ''
            this.lr_loadDepartments(this.companyId)
            this.loadTableData()
        },
        async handleSync(){
            this.loading = true
            let queryData = {
                keyword:this.searchWord,
                parentid:this.departmentId
            }
            const res = await this.$awaitWraper(api.syncData(this.companyId,queryData))
            if(res){
                this.$message({
                    type: 'success',
                    message: this.$t('同步成功!')
                })
            }
            this.loadTableData()
            this.loading = false
        }
    }
}
</script>
